<template>
  <div class="pagination-container">
    <el-row>
      <el-col :span="8">
        <el-button-group>
          <el-button-package :c-m="refreshCM" />
        </el-button-group>
      </el-col>
      <el-col :span="16">
        <el-pagination
          ref="ref-el-pagination"
          :total="total"
          :current-page.sync="currentPage"
          :page-size.sync="pageSize"
          :page-sizes="pageSizes"
          :layout="layout"
          :background="background"
          v-bind="$attrs"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
/*
prop 列表
  CM: ComponentModel  组件模型
  linkage: boolean    组件默认联动状态 [默认为 false]
CM.meta 扩展
  menu: ComponentModel  [参考 Dropdown]
ref 列表
  ref-el-tree [默认]
  ref-el-dropdown

注意：
  01. 此组件实现使用了部分 hack 方式，部分功能标准 API 并未提供，在版本更新后可能失效
*/
import { Component, Prop, Vue } from 'vue-property-decorator'
import { Tree, Dropdown } from 'element-ui'
import TgComponent from '../TgComponent'
import { ComponentModel } from '@TG/interface'
import { scrollTo } from '@TG/kit/scrollTo'
import ElButtonPackage from './ElButtonPackage.vue'

@Component({
  name: 'ElPaginationPackage',
  components: {
    ElButtonPackage
  }
})
export default class extends TgComponent {
  @Prop({ type: Number, required: true }) private total!: number
  @Prop({ type: Number, default: 1 }) private page!: number
  @Prop({ type: Number, default: 20 }) private limit!: number
  @Prop({ type: Array, default: () => [10, 20, 30, 40, 50] }) private pageSizes!: number[]
  @Prop({ type: String, default: 'slot, ->, total, prev, pager, next, sizes' }) private layout!: string
  @Prop({ type: Boolean, default: true }) private background!: boolean
  @Prop({ type: Boolean, default: true }) private autoScroll!: boolean

  private refreshCM: ComponentModel = {
    props: {
      plain: false,
      icon: 'el-icon-antd-retweet'
    },
    events: { click: () => this.refresh() },
    meta: { tip: '刷新列表当前页' }
  }

  get currentPage() {
    return this.page
  }

  set currentPage(value) {
    this.$emit('update:page', value)
  }

  get pageSize() {
    return this.limit
  }

  set pageSize(value) {
    this.$emit('update:limit', value)
  }

  private handleSizeChange(pageSize: number) {
    this.$emit('size-change', { page: this.currentPage, limit: pageSize })
    if (this.autoScroll) {
      scrollTo(0, 800)
    }
  }

  private handleCurrentChange(currentPage: number) {
    this.$emit('current-change', { page: currentPage, limit: this.pageSize })
    if (this.autoScroll) {
      scrollTo(0, 800)
    }
  }

  private refresh() {
    this.handleCurrentChange(this.currentPage)
  }

  public defaultRef() {
    return 'el-pagination'
  }
}
</script>

<style scoped>
.pagination-container {
  background: #fff;
  padding: 16px;
}
</style>
